<template>
  <view class="main" :style="{ backgroundImage: `url(${bg_src})` }">
    <view class="content">
      <!-- 帮助部分 -->
      <view class="help-view">
        <image class="help-button" :src="help_src" mode="heightFix" />
      </view>
      <!-- 内容部分 -->
      <view class="content-view"></view>
      <!-- 底部按钮 -->
      <view class="button-view">
        <image class="knew-button" :src="knew_src" mode="widthFix"
          @click="clickStartUseBtn"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import button_knew from '@/static/images/button_knew.png'
import button_add from '@/static/images/button_add.png'
import { base64_success_bg_image } from '@/static/base64'

const bg_src = base64_success_bg_image // 背景图片
const knew_src = ref(button_knew) // 知道了按钮图片
const help_src = ref(button_add) // 帮助按钮图片

const clickStartUseBtn = () => {

      uni.navigateTo({
        url: '/pages/reserve/control',
      })
}

</script>

<style scoped lang="scss">
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  // 背景图片自适应
  background-size: 100% 100%;

  // 内容
  .content {
    flex: 1;
    overflow: auto;
    padding: 40rpx 20rpx;

    // 帮助部分
    .help-view {
      height: 8%;
      padding: 3%;

      .help-button {
        height: 42rpx;
        float: right;
      }
    }

    // 内容部分
    .content-view {
      height: 70%;
    }

    // 底部按钮
    .button-view {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 22%;

      .knew-button {
        width: 80%;
      }
    }
  }
}
</style>
